<template>
  <!-- eld -->
  <el-dialog :title="title"
             :visible.sync="dialogShow"
             width="50%"
             @close="closeDialog">
    <el-form ref="formRef"
             :model="fromData"
             :rules="fromRules"
             label-width="140px"
             :inline="false"
             size="normal">
      <el-row>
        <el-col :span="12">
          <el-form-item label="管理员名称"
                        prop="username"
                        label-width="100px">
            <el-input v-model="fromData.username"
                      placeholder="请输入管理员名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员邮箱"
                        prop="email"
                        label-width="100px">
            <el-input v-model="fromData.email"
                      placeholder="管理员邮箱"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="管理员密码"
                        prop="password"
                        label-width="100px">
            <el-input v-model="fromData.password"
                      placeholder="管理员密码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员手机"
                        prop="phone"
                        label-width="100px">
            <el-input v-model="fromData.phone"
                      placeholder="管理员手机"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <!-- 男女左右选项 ————————————————————————————————————-->
          <el-form-item label="管理员状态"
                        prop=""
                        label-width="100px">
            <el-switch v-model="fromData.status"
                       active-text="禁用"
                       inactive-text="启用"
                       :active-value="1"
                       :inactive-value="0"
                       active-color="#13ce66"
                       inactive-color="#ff4949"></el-switch>
            <!-- 男女左右选项 ————————————————————————————————————-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管理员头像"
                        prop=""
                        label-width="100px">
            <ImageUpload ref="ImageUpload"
                         :pic="fromData.avatar"
                         v-if="dialogShow"></ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="管理员角色"
                        prop="roleid_list"
                        label-width="100px">
            <el-checkbox-group v-model="fromData.roleid_list">
              <el-checkbox :label="item.id"
                           v-for="item in checkList"
                           :key="item.id">{{ item.role_name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer">
      <el-button @click="dialogShow = false">取 消</el-button>
      <el-button type="primary"
                 @click.native="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ImageUpload from "@/components/ImageUpload";
import { addUserListApi, setUserListApi } from "@/api/permission/userinfo";
import { getUserCheckListApi } from "@/api/permission/userinfo";
export default {
  name: "addloyees",
  components: { ImageUpload },

  data () {
    const validatorMobile = (rule, value, callback) => {
      if (
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(
          value
        )
      ) {
        return callback();
      } else {
        return callback(new Error("手机号格式不正确"));
      }
    };
    const validatoremail = (rule, value, callback) => {
      if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value)) {
        return callback();
      } else {
        return callback(new Error("邮箱格式不正确"));
      }
    };
    const validatorpassword = (rule, value, callback) => {
      if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,16}$/.test(value)) {
        return callback();
      } else {
        return callback(new Error("密码格式不正确"));
      }
    };
    return {
      fromData: {
        avatar: "",
        email: "",
        password: "",
        phone: "",
        roleid_list: [],
        status: 1,
        username: "",
      },
      checkList: [],
      //
      fromRules: {
        avatar: [
          {
            required: true,
            message: "",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入正确邮箱",
            trigger: "blur",
            validator: validatoremail,
          },
        ],
        password: [
          {
            required: true,
            message: "请输入正确密码",
            trigger: "blur",
            validator: validatorpassword,
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入正确手机号",
            trigger: "blur",
            validator: validatorMobile,
          },
        ],
        username: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
        ],
        roleid_list: [{ required: true, message: "必选一个", trigger: "blur" }],
      },
      // 开关
      dialogShow: false,
    };
  },
  computed: {
    title () {
      return this.fromData.id ? "修改" : "新增";
    },
  },
  created () { this.getList() },
  methods: {
    async getList () {
      console.log(9999);
      const res3 = await getUserCheckListApi()
      console.log(res3.list);
      this.newArr = res3.list.map((item) => item.role_name)
      console.log(this.newArr);
      this.checkList = res3.list.map((item) => {
        let obj = {
          role_name: item.role_name,
          id: item.id
        }
        return obj
      })
    },
    // 处理列表图片问题
    changeImg (url) {
      return process.env.VUE_APP_BASE_IMG + url;
    },
    // 确认提交
    async btnOk () {
      console.log(this.fromData);
      try {
        // 1.表单校验
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      //   2.整理数据，提交数据
      //   2.1 判断是编辑还是添加
      if (this.fromData.id) {
        // 编辑
        await setUserListApi(this.fromData);
        this.$message.success("修改成功");
      } else {
        // 添加
        this.fromData.avatar = this.$refs.ImageUpload.img;
        console.log(this.fromData.roleid_list);
        const res = await addUserListApi(this.fromData);
        console.log(res);
        this.$message.success("添加成功");
        this.$emit('updated')
      }

      // 3.提示成功

      // 4.通知列表更新
      this.$emit("updataList");
      // 5.关闭弹框
      this.dialogShow = false;
    },
    // 重置表单，防止遗留问题
    closeDialog () {
      this.$refs.formRef.resetFields();
      this.fromData = {
        avatar: "",
        email: "",
        password: "",
        phone: "",
        roleid_list: [],
        status: 1,
        username: "",
      };
    },
  },
};
</script>
<style>
</style>



